<!DOCTYPE html>
<html ng-app="test">

<head>
    <meta charset="UTF-8">
    <title>日期插件</title>
    <script src="js/jquery.min.js" charset="utf-8"></script>
    <script src="jquery-ui/jquery-ui.min.js" charset="utf-8"></script>
    <script src="js/datepicker-zh-CN.js" charset="utf-8"></script>
    <script src="js/angular.js" charset="utf-8"></script>
    <script src="js/monthpicker.js"></script>
    <link href="jquery-ui/jquery-ui.min.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/monthpicker.css" rel="stylesheet">
    <script type="text/javascript">
        let mod = angular.module('test', []);
        mod.controller('main', function ($scope) {
            $scope.whereMap = {
                time1: '',
                time2: ''
            };
            $("#input1").datepicker({
                dateFormat: 'yy-mm-dd',
                changeMonth: true,
                changeYear: true,
                onSelect: function (dataText) {
                    $scope.whereMap.time1 = dataText;
                }
            });
            $scope.timeFocus = function () {
                if ($('.monthpicker')) {
                    $(".monthpicker").remove();
                }
                var y;
                if ($scope.whereMap.time2) {
                    var _time = $scope.whereMap.time2.split('-');
                    y = _time[0];
                }
                $('#input2').monthpicker({
                    selectYears: y ? y : '',
                    onMonthSelect: function (m, y) {
                        m = (parseInt(m) + 1);
                        if (m.toString().length == 1) {
                            m = '0' + m;
                        }
                        $scope.whereMap.time2 = y + '-' + m;
                        $scope.$apply();
                    }
                });
            }
        });
    </script>
</head>

<body ng-controller="main">
<div class="form-horizontal" style="width: 800px;margin: 90px auto;">
    <div class="form-group">
        <label for="input1" class="col-sm-2 control-label">日期插件1</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="input1" placeholder="请选择时间" ng-model="whereMap.time1"
                   autocomplete="off">
        </div>
    </div>
    <div class="form-group">
        <label for="input2" class="col-sm-2 control-label">日期插件2</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="input2" placeholder="请选择时间" ng-model="whereMap.time2"
                   ng-focus="timeFocus();">
        </div>
    </div>
</div>
</body>

</html>